<template>
	<view>
		<view>
			<view class="identityClass">
				<view class="identityClass_title">请拍摄您本人身份证</view>
				<view class="identityClass_details">仅限于人民银行核查公民身份_请放心使用</view>
				<!-- 身份证人像面 -->
				<view class="identityClass_portrait" v-if="Portrait" @click="opportunities('center')">
					<img src='../../../../static/shen/Slice 58@2x.png' />
					<view class="xiang">
						<img style="" src='../../../../static/shen/Slice 60@2x.png' /><br />点击识别人像
					</view>
				</view>

				<view class="Portrait" v-else>
					<view class="Portrait_left">
						<view class="Portrait_left_item">
							<view class="Portrait_left_item_lable">姓名</view>
							<view>
								<uni-easyinput placeholder-style="font-size:28rpx;" :inputBorder="false" v-model="value"
									placeholder="请输入内容" @input="input"></uni-easyinput>
							</view>
						</view>
						<view class="Portrait_left_item">
							<view class="Portrait_left_item_lable">身份证号</view>
							<view><uni-easyinput placeholder-style="font-size:28rpx;" :inputBorder="false"
									v-model="value" placeholder="请输入内容" @input="input"></uni-easyinput></view>
						</view>
						<view class="Portrait_left_item">
							<view class="Portrait_left_item_lable">地址</view>
							<view><uni-easyinput autoHeight placeholder-style="font-size:28rpx;" :inputBorder="false"
									v-model="value" placeholder="请输入内容" @input="input"></uni-easyinput></view>
						</view>
					</view>

					<view class="Portrait_right" @click="PortraitFn('bottom')">+
					</view>
				</view>

				<!-- 身份证国徽面 -->
				<view class="identityClass_portrait NationalEmblem" v-if="NationalEmblem">
					<img src='../../../../static/shen/Slice 59@2x.png' />
					<view class="xiang">
						<img style="" src='../../../../static/shen/Slice 60@2x.png' />
						<br />点击识别人像
					</view>
				</view>

				<view class="NationalEmblem Portrait" v-else>
					<view class="Portrait_left">
						<view class="Portrait_left_item">
							<view class="Portrait_left_item_lable">签发机关</view>
							<view>
								<uni-easyinput placeholder-style="font-size:28rpx;" :inputBorder="false" v-model="value"
									placeholder="请输入内容" @input="input"></uni-easyinput>
							</view>
						</view>
						<view class="">
							<view class="qixian">身份证号有效期限</view>
							<view><uni-easyinput placeholder-style="font-size:28rpx;" :inputBorder="false"
									v-model="value" placeholder="请输入内容" @input="input"></uni-easyinput></view>
						</view>
					</view>

					<view class="Portrait_right">+
						<!-- <img src='../../../static/home.png' /> -->
					</view>
				</view>


				<view class="CardPrompt" @click="cardSkills('bottom')"> <img
						src='../../../../static/shen/Slice 70@2x.png' />
					身份识别小技巧
				</view>
				<view class="identityClass_btn">下一步</view>
				<view class=" CardPrompt1"><img src='../../../../static/shen/Slice 71@2x.png' /> 信息只能加密，实时保障您的信息安全
				</view>
			</view>


			<!-- 身份证技巧 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<view class="content">
						<view class="content_title">身份证试别小技巧</view>
						<view class="content_details">请识别本人有效期30天内的二代身份证，否则将无法通过审核</view>
						<!-- 正确示范 -->
						<view class="demonstration">
							<view class="demonstration_left">
								<view class="demonstration_left_title">
									<img src="../../../../static/shen/Slice 72@2x.png" />
									正确示范
								</view>
								<view class="demonstration_left_details">保持内容清晰可见，证件后面建议垫一张白纸</view>
							</view>
							<view class="demonstration_right">
								<view><img src='../../../../static/shen/Slice 61@2x.png' /></view>
							</view>
						</view>
						<!-- 不佳示范 -->
						<view class="Poor_demonstration">
							<view class="Poor_demonstration_title">
								<img src="../../../../static/shen/Slice 73@2x.png" />不佳示范
							</view>
							<view class="Poor_demonstration_img">
								<view><img src='../../../../static/shen/Slice 62@2x.png' /><br />边框缺失</view>
								<view><img src='../../../../static/shen/Slice 63@2x.png' /><br />拍摄模糊</view>
								<view><img src='../../../../static/shen/Slice 64@2x.png' /><br />反光过度</view>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>



			<!-- 识别机会 -->
			<uni-popup ref="opportunities" background-color="#fff" class="opportunities">
				<view class="popup-content">
					<view class="opportunities_content" :class="opportunitiesav == 2 ? 'opportunities_content1':''">
						<view v-if="opportunitiesav == 0" class="opportunities_content_title">识别失败，还有2次机会</view>
						<view v-if="opportunitiesav == 1" class="opportunities_content_title">您还未满18岁</view>
						<view v-if="opportunitiesav == 0" class="opportunities_content_text">请确保拍摄身份证边框完整、字体清晰、亮度均匀
						</view>
						<view v-if="opportunitiesav == 1" class="opportunities_content_text">
							根据相关法规要求<br />平台仅向18岁以上用户提供服务， 请确认您的身份信息后再申请</view>
						<view v-if="opportunitiesav == 2"
							class="opportunities_content_text opportunities_content_tex1 ">
							根据相关法规要求<br />平台仅向18岁以上用户提供服务， 请确认您的身份信息后再申请</view>
						<view class="opportunities_content_btn" @click="opportunitiesFn">我知道了</view>
					</view>
				</view>
			</uni-popup>


			<!-- 上传 -->
			<uni-popup ref="upload" background-color="#fff" class="uploadClass">
				<view class="yulan" v-if="yulan">
					<img :src="selectedImage" :style="{ transform: `rotate(${jiaodu}deg)` }" />
				</view>
				<view class="popup-content">
					<view @click="chongxuan()">
						<view><img src='../../../../static/home.png' /></view>重选
					</view>
					<view @click="uploadGb()">
						<view><img src='../../../../static/home.png' /></view>关闭
					</view>
					<view @click="jiaodubtn()">
						<view><img src='../../../../static/home.png' /></view>旋转
					</view>
					<view @click="yulanbtn()">
						<view><img src='../../../../static/home.png' /></view>预览
					</view>
					<view @click="chongxuan()">
						<view><img src='../../../../static/home.png' /></view>上传
					</view>
				</view>
			</uni-popup>


		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				avicnt: 1,
				Portrait: 1,
				NationalEmblem: 1,
				value: '',
				opportunitiesav: 0,
				selectedImage: '',
				yulan: false,
				jiaodu: 0,
			}
		},
		methods: {
			cardSkills(type) {
				this.$refs.popup.open(type)
			},
			opportunities(type) {
				this.$refs.opportunities.open(type)
			},
			opportunitiesFn() {
				this.$refs.opportunities.close()
			},
			PortraitFn(type) {
				this.$refs.upload.open(type)
			},
			uploadGb() {
				this.$refs.upload.close()
			},
			chongxuan() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.selectedImage = res.tempFilePaths[0];
						console.log(this.selectedImage);
					}
				});
				// 图片上传
				// uni.uploadFile({
				// 	url: 'https://health.zjsishencong.com/healthApi/file/upload/image',
				// 	filePath: tempFilePaths[i],
				// 	name: 'file',
				// 	header: {
				// 		access_token: that.$store.state.m_cart.token,
				// 	},
				// 	success: (res) => {

				// 	}
				// })
			},
			yulanbtn() {
				this.yulan = true
			},
			jiaodubtn() {
				this.jiaodu = this.jiaodu + 90
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 40rpx 36rpx 40rpx;

		.xiayibu {
			width: 72rpx;
			height: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-right: 16rpx;
		}

		.title_right {
			// width: 96rpx;
			height: 34rpx;

			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;

		}
	}

	.ProgressBar {
		display: flex;
		// justify-content: ;
		justify-items: center;
		align-items: center;

		.ProgressBar_item {
			width: 24rpx;
			height: 24rpx;
			background: #E5E5E5;
			border-radius: 25rpx;
		}

		.ProgressBar_strip {
			width: 32rpx;
			height: 1rpx;
			background: #E5E5E5;
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.ProgressBar_strip_i {
				width: 14rpx;
				height: 1rpx;
				background: #666666;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}
		}

		.ProgressBar_strip1 {
			width: 32rpx;
			height: 1rpx;
			background: #E5E5E5;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}

		.ProgressBar_item_Select {
			width: 36rpx;
			height: 36rpx;
			border-radius: 25rpx;
			border: 2rpx solid #666666;
			font-size: 24rpx;
			color: #0063FE;
			line-height: 36rpx;
			text-align: center;
			background-color: #fff;
		}
	}


	.identityClass {
		padding: 0 40rpx;

		.identityClass_title {
			width: 360rpx;
			height: 56rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 40rpx;
			color: #333333;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 12rpx;
		}

		.identityClass_details {
			width: 518rpx;
			height: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 40rpx;
		}

		.identityClass_portrait {
			width: 630rpx;
			height: 346rpx;
			border-radius: 20rpx;
			background-color: #eff6ff;
			margin: 0 auto;
			// border: 2px dashed #a8d3ff;
			margin-bottom: 62rpx;

			.xiang {
				position: relative;
				z-index: 99;
				top: -250rpx;
				color: #0063FE;
				// left: 280rpx;
				text-align: center;

				img {
					width: 100rpx;
					height: 100rpx;
				}
			}

			img {
				width: 100%;
				height: 100%;
			}
		}

		.CardPrompt {
			margin: 0 auto;

			img {
				width: 42rpx;
				height: 42rpx;
				margin-right: 8rpx;
				vertical-align: middle;
			}

			height: 42rpx;
			font-family: PingFang SC,
			PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #666666;
			line-height: 35rpx;
			text-align: center;
		}

		.identityClass_btn {
			width: 670rpx;
			height: 100rpx;
			background: rgba(34, 83, 255, 0.3);
			border-radius: 52rpx 52rpx 52rpx 52rpx;
			margin-top: 42rpx;
			color: #fff;
			font-size: 36rpx;
			text-align: center;
			line-height: 100rpx;
		}

		.CardPrompt1 {
			font-size: 28rpx;
			color: #999999;
			text-align: center;
			margin-top: 20rpx;


			// vertical-align:middle;
			img {
				// width: 27rpx;
				height: 34rpx;
				margin-right: 20rpx;
				margin-top: -5rpx;
				vertical-align: middle;
			}
		}

		.Portrait {
			// width: 504rpx;
			// height: 284rpx;
			// border-radius: 0rpx 0rpx 0rpx 0rpx;
			margin: 84rpx 0 80rpx 0;
			display: flex;
			justify-content: space-between;
			justify-items: center;
			align-items: center;

			.Portrait_left {
				width: 504rpx;
				height: 284rpx;
				// border: 1px solid #ccc;
				margin-right: 18rpx;

				.Portrait_left_item {
					display: flex;
					align-items: center;
					margin: 30rpx 0;

					.Portrait_left_item_lable {
						width: 200rpx;
						height: 40rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #666666;
						line-height: 33rpx;
					}




					.uni-easyinput__content-textarea {
						width: 670rpx;
						height: 496rpx;
						background: #F7F7F7;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						margin: 0;

						.uni-textarea-placeholder {
							width: 256rpx;
							height: 44rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #C4C4C4;
							line-height: 38rpx;
							margin-top: 30rpx;
						}
					}
				}


				.qixian {
					font-size: 28rpx;
					color: #666666;
					margin-bottom: 60rpx;
				}

			}

			.Portrait_right {
				width: 148rpx;
				height: 148rpx;
				border: 1px solid #ccc;
				font-size: 100rpx;
				line-height: 140rpx;
				text-align: center;
				color: #ccc;
			}
		}

	}

	.content {
		width: 750rpx;
		height: 706rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.content_title {
			height: 56rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 40rpx;
			color: #333333;
			line-height: 47rpx;
			margin: 40rpx 0 20rpx 40rpx;
		}

		.content_details {
			width: 670rpx;
			height: 82rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-left: 40rpx;
			margin-bottom: 48rpx;
		}

		.demonstration {
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;

			.demonstration_left {
				.demonstration_left_title {
					// width: 128rpx;
					height: 44rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					line-height: 38rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-bottom: 16rpx;

					img {
						width: 31rpx;
						// vertical-align: middle;
						height: 31rpx;
						margin-right: 8rpx;

					}
				}

				.demonstration_left_details {
					width: 390rpx;
					height: 68rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}

			.demonstration_right {
				width: 222rpx;
				height: 140rpx;
				background: #F7F8FA;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				text-align: center;
				line-height: 140rpx;

				view {
					img {
						// margin-top: 20rpx;
						width: 100%;
					}
				}
			}
		}

		.Poor_demonstration {
			padding: 0 40rpx;
			margin-top: 46rpx;

			.Poor_demonstration_title {
				// width: 128rpx;
				height: 44rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 38rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-bottom: 16rpx;

				img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 8rpx;
					// vertical-align: middle;
				}
			}

			.Poor_demonstration_img {
				display: flex;
				justify-content: space-between;
				text-align: center;

				view {
					width: 200rpx;
					height: 128rpx;
					background: #F7F8FA;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					line-height: 60rpx;
					font-size: 24rpx;
					color: #666666;

					img {
						width: 100%;
					}
				}
			}

		}

	}

	.opportunities {
		border-radius: 50rpx;
		width: 750rpx;

		.popup-content {
			border-radius: 50rpx;
		}

		.opportunities_content {
			width: 630rpx;
			height: 524rpx;
			background: linear-gradient(180deg, #EBF3FF 0%, #FFFFFF 39%);
			border-radius: 50rpx;

			.opportunities_content_title {
				height: 50rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #000000;
				line-height: 42rpx;
				text-align: center;
				padding-top: 72rpx;
				margin-bottom: 66rpx;
			}

			.opportunities_content_text {
				width: 474rpx;
				height: 88rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #666666;
				line-height: 38rpx;
				text-align: center;
				margin: 0 auto;
				margin-bottom: 98rpx;
			}

			.opportunities_content_tex1 {
				padding-top: 66rpx;
			}

			.opportunities_content_btn {
				width: 534rpx;
				height: 90rpx;
				background-color: #0063FE;
				margin: 0 auto;
				text-align: center;
				font-size: 34rpx;
				color: #fff;
				line-height: 90rpx;

			}
		}


		.opportunities_content1 {
			height: 400rpx;
		}
	}

	.uploadClass {
		width: 670rpx;
		height: 150rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.yulan {
			position: fixed;
			top: -1200rpx;
			left: 40rpx;
			padding-right: 40rpx;

			img {
				width: 100%;
			}
		}

		.popup-content {
			width: 590rpx;
			height: 130rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding-left: 40rpx;
			padding-right: 40rpx;
			padding-top: 20rpx;
			position: fixed;
			top: -300rpx;
			left: 40rpx;
			display: flex;
			justify-content: space-between;
			text-align: center;
			font-size: 28rpx;
			color: #666666;

			view {
				width: 68rpx;
				height: 68rpx;
				background: #F4F8FF;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
			}

			img {
				width: 42rpx;
				height: 42rpx;
				margin-top: 12rpx;
				// margin-bottom: 6rpx;
			}
		}
	}
</style>
<style>
	.opportunities {
		border-radius: 50rpx;
		width: 750rpx;

		uni-view {
			border-radius: 50rpx;
		}
	}
</style>